<template>
	<view :data-theme="theme()" :class="theme() || ''">
		<view class="index_bgc"></view>
		<view class="head_top" :style="'height:'+topBarTop()+'px;'"></view>
		<view class="d-f" :style="'height:'+topBarHeight()+'px;'">
			<view class="title" :style="'line-height:'+topBarHeight()+'px;'">商圈分类</view>
		</view>
		<view class="new_search_box" @click.stop="go_search">
			<view class="new_search">
				<text class="icon iconfont icon-sousuo"></text>
				<text style="padding-left: 20rpx;">请输入搜索内容</text>
			</view>
		</view>
		<diy style="position: relative;" :diyItems="items"></diy>
		<view class="d-b-c">
			<view class="box_tab_shop">
				<view :class="tj_sta==1?'item_tab_shop active':'item_tab_shop'" @click="checkType(1)">
					推荐商家
				</view>
				<view :class="tj_sta==0?'item_tab_shop active':'item_tab_shop'" @click="checkType(0)">
					附近商家
				</view>
			</view>
			<view @click="goShoplist" style="font-size: 24rpx;font-weight: normal;color: #999;">查看更多</view>
		</view>
		
		
		<view class="fff_box" v-for="(item,index) in ShopList" :key="index" @tap.stop="goShop(item)">
			<view class="store_logo">
				<image :src="item.logos?item.logos:require('@/static/noimg.png')" mode="aspectFill"></image>
			</view>
			<view class="right">
				<view class="main">
					<view class="store_name">
						{{item.name}}
					</view>
					<view class="frsjnr">
						<view class="fraction">
							{{item.server_score}}分
						</view>
						<view class="distance">
							{{item.km.toFixed(2)}}km
						</view>
					</view>
					<view class="cate_show">
						主营业务：{{item.category_name}}
					</view>
					<view class="onTime">
						营业时间：{{item.work_time?item.work_time:'全天营业'}}
					</view>
				</view>
				<view class="product-list">
					<view class="product-item" v-for="(row,i) in item.productList" :key="i" @tap.stop="goPriduct(row)">
						<view class="product-image">
							<image :src="row.image[0].file_path" mode="aspectFill"></image>
						</view>
						<view class="product-name">
							{{row.product_name}}
						</view>
						<view class="product-price">
							￥{{row.product_price}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 30rpx;"></view>
		<tabBar></tabBar>
	</view>
</template>

<script>
	import diy from '@/components/diy/diy.vue';
	export default {
		components: {
			diy
		},
		data() {
			return {
				items: [],
				lng: '',
				lat: '',
				prov: '',
				city: '',
				region: '',
				page: 1,
				list_rows: 10,
				ShopList: [],
				last_page:0,
				tj_sta: 1,
			};
		},
		mounted() {
			this.getData()
		},
		onShow() {
			let self = this
			uni.getLocation({
				type: 'wgs84',
				success(res) {
					self.lng = res.longitude
					self.lat = res.latitude
					self.getPCR()
				},
				fail(err) {
					self.lng = 116.278632
					self.lat = 39.87055
					self.prov = '山东省'
					self.city = '临沂市'
					self.region = '罗庄区'
					self.page = 1;
					self.ShopList = []
					self.getShopList()
				}
			
			})
		},
		onPullDownRefresh() {
			this.page = 1;
			this.ShopList = []
			this.getShopList()
		},
		methods: {
			goShoplist(){
				uni.navigateTo({
					url:'/pages/shopcate/shopcate'
				})
			},
			goShop(item){
				uni.navigateTo({
					url:'/pages/shop/shop?shop_supplier_id='+item.shop_supplier_id
				})
			},
			goPriduct(item){
				uni.navigateTo({
					url:'/pages/product/detail/detail?product_id='+item.product_id
				})
			},
			checkType(e){
				this.tj_sta = e;
				this.page = 1;
				this.ShopList = []
				this.getShopList()
			},
			getPCR() {
				let self = this;
				self._post('index/get_city', {
					lng: self.lng,
					lat: self.lat,
				}, function(res) {
					self.prov = res.data.regeocode.addressComponent.province;
					self.city = res.data.regeocode.addressComponent.city;
					self.region = res.data.regeocode.addressComponent.district;
					self.page = 1;
					self.ShopList = []
					self.getShopList()
				});
			},
			getShopList() {
				let self = this;
				uni.showLoading({
					title:'加载中'
				})
				self._post('index/supplier', {
					tj_sta:self.tj_sta,
					lng: self.lng,
					lat: self.lat,
					page: self.page,
					city:self.tj_sta==1?'':self.city,
					list_rows: self.list_rows,
					sortType: 'all'
				}, function(res) {
					self.ShopList = self.ShopList.concat(res.data.list.data)
					self.last_page = res.data.list.last_page
					uni.stopPullDownRefresh()
					uni.hideLoading()
				});
			},
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('index/supplier_banner', {}, function(res) {
					self.items = res.data.items;
					uni.hideLoading();
					self.loadding = false;
					uni.stopPullDownRefresh();
				});
			},
			go_search() {
				uni.navigateTo({
					url: '/pages/product/search/search'
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.box_tab_shop{
		margin: 20rpx;
		display: flex;
		.item_tab_shop{
			height: 88rpx;
			line-height: 88rpx;
			position: relative;
			color: #999999;
			font-size: 24rpx;
			margin: 0 20rpx;
		}
		.active{
			color: #333333;
			font-size: 30rpx;
			font-weight: bold;
			&::after{
				content: '';
				left: 40rpx;
				height: 10rpx;
				background-color: #ED4549;
				position: absolute;
				bottom: 26rpx;
				left: 0;
				right: 0;
				z-index: -1;
				border-radius: 8rpx;
				
			}
		}
	}
	.new_search_box {
		margin: 20rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		display: flex;
		color: #999999;
	
		.new_search {
			padding-left: 20rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
	
	}
	.title{
		width: 100%;
		text-align: center;
		color: #ffffff;
		font-size: 16px;
		font-weight: bold;
	}
	page {
		background: #ffffff;
	}
	.index_bgc {
		width: 100%;
		height: 750rpx;
		background: linear-gradient(#02A550, #F6F6F6);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -99;
	}
	.fff_box {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		display: flex;
	
		.store_logo {
			width: 160rpx;
			height: 160rpx;
			border-radius: 16rpx;
	
			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
			}
		}
	
		.right {
			width: 500rpx;
		}
	
		.main {
			width: 100%;
			padding-left: 20rpx;
			box-sizing: border-box;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #eeeeee;
	
			.store_name {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}
	
			.frsjnr {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 20rpx;
				line-height: 38rpx;
	
				.fraction {
					font-size: 22rpx;
					color: #1BAE61;
				}
			}
	
			.cate_show {
				font-size: 22rpx;
				line-height: 38rpx;
				color: #777;
			}
	
			.onTime {
				margin-top: 10rpx;
				background-color: rgba(27, 174, 97, 0.10);
				color: rgba(27, 174, 97, 1);
				font-size: 20rpx;
				width: 240rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
			}
		}
	
		.product-list {
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			overflow: auto;
	
			&::-webkit-scrollbar {
				width: 0 !important
			}
	
			.product-item {
				margin-right: 20rpx;
	
				.product-image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 16rpx;
	
					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 16rpx;
					}
				}
	
			}
	
			.product-name {
				width: 150rpx;
				text-align: center;
				font-size: 24rpx;
				color: #333333;
				font-weight: bold;
				margin-top: 4rpx;
				white-space: nowrap;
				/* 确保文本在一行内显示 */
				overflow: hidden;
				/* 隐藏超出容器的文本 */
				text-overflow: ellipsis;
				/* 使用省略符号表示文本被截断 */
			}
			
			.product-price {
				text-align: center;
				color: #ED4549;
				font-size: 20rpx;
				margin-top: 4rpx;
			}
		}
	}
</style>